<template>
    <el-card class="box-card" shadow="never">
      <el-container>
          <el-header  height="30px" style="background-color: #FFFFFF;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>组织架构</el-breadcrumb-item>
                <el-breadcrumb-item>通讯录</el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>
          <el-container>
          <el-aside :style="menuStyle" id="depart-el-aside"> <!--151+2px的滚动条宽度-->
                <el-input
                  placeholder="输入部门名称过滤"
                  v-model="filterText">
                </el-input>
                <el-tree
                  id="basic-data-menu"
                  class="filter-tree"
                  :data="departlist"
                  :default-expand-all=true
                  :expand-on-click-node=false
                  :filter-node-method="filterNode"
                  @node-click="handleMenuSelect"
                  ref="tree">
                  <span class="custom-tree-node" slot-scope="{node,data}">
                      <span>
                          <i class="iconfont icon-wenjianjia"></i>{{node.label}}
                      </span>
                  </span>
                </el-tree>
          </el-aside>
          <el-main id="group-el-main" style="background-color:#FFFFFF">
            <router-view v-if="hideBasicDataRouterView"/>
          </el-main>
          </el-container>
      </el-container>
    </el-card>
</template>

<script>
  export default{
     name:'DepartMenu',
     data(){
        return{
            menuStyle:{
              height:'500px'
            },
            filterText: '',
            hideBasicDataRouterView:true,
            checkd_id:-1
        }
     },
     created(){
        //计算菜单高度   20+1+20+30
        let window_height = window.innerHeight;
        let menuHeight = (window_height - 80 - 71- 20 - 20) + 'px';
        this.menuStyle = {
            height: menuHeight
        }
        //查询架构
        let send_data={
           api_token:this.$store.getters.getSessionId
        }
        this.$store.dispatch('loadDepartList',send_data);
        this.$router.push('/depart/memberlist');
     },
     computed:{
        departlist(){
           return this.$store.getters.getDepartList;
        }
     },
     methods:{
       handleMenuSelect(e,self,component){
          this.checkd_id=self.data.d_id;
          this.$store.commit('setDepartCheckedId',this.checkd_id);
          //console.log(this.checkd_id);
          this.router_push(self.data.d_id);
       },
       filterNode(value, data) {
         if (!value) return true;
         return data.label.indexOf(value) !== -1;
       },
       router_push(d_id){
          this.$router.push({
            name:'memberlist',
            query:{
              d_id:d_id
            }
          });
       }
     },
     watch: {
       filterText(val) {
         this.$refs.tree.filter(val);
       }
     },
  }
</script>

<style>
  #depart-el-aside{
      width:auto !important;
      padding-right:10px;
  }
  #depart-el-aside .el-tree-node{
     margin-top: 5px;
  }
  #depart-el-aside .custom-tree-node{
     font-size:14px;
  }
  .filter-tree{
    margin-top:10px;
  }
  #basic-data-menu{
    min-height: 400px;
  }
  #group-el-main{
    padding:0px !important;
    margin-left:10px;
  }
</style>
